<template>
  <a-modal
    :title="`vip${model ? '编辑' : '新增'}`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <a-form-item label="名称">
          <a-input v-decorator="['name']" placeholder="填写名称" />
        </a-form-item>
        <a-form-item label="价格">
          <a-input-number v-decorator="['price']" placeholder="填写价格" />
        </a-form-item>
        <a-form-item label="周期">
          <a-select v-decorator="['period']" placeholder="请选择周期">
            <a-select-option :value="Number(index)" v-for="(item, index) in period" :key="index">{{
              item
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { PERIOD } from '@/mixins/vip'
import formModalMixin from '@/mixins/formModalMixin'
// 表单字段
const fields = ['period', 'id', 'price', 'name']

export default {
  mixins: [formModalMixin],
  props: {
    addAction: {
      type: Function,
      default: () => {}
    },
    editAction: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    this.period = PERIOD
    this.fields = fields
    return {}
  }
}
</script>
